<template>
  <div class="home">
    <div class="wx">
      <i class="iconfont icon-xiaochengxu"></i>
      <i @mouseover="showWX = true" @mouseleave="showWX = false">扫码访问微信小程序</i>
      <!-- <img src="../assets/imgs/wx.jpg" class="img" v-if="showWX"> -->
      <img src="../assets/imgs/wx.jpg" class="img">
    </div>
    <div class="mask">
      <img src="../assets/imgs/map.jpeg" class="logo">
    </div>
    <div class="login scroll-base" @keydown.enter="login">
      <h1 class="title">FootMark足迹地图</h1>
      <p>
        <ab-dinput class="ab-input"  v-model:value="user.name" type="text" placeholder="输入用户名" 
          color="primary" :clearicon="true" prefix="iconfont icon-wode"/>
      </p>
      <p>
        <ab-dinput class="ab-input" v-model:value="user.psw" type="password" placeholder="请输入密码" 
          color="primary" :pswicon="true" prefix="iconfont icon-ziyuanxhdpi"/>
      </p>
      <p>
        <ab-button class="ab-button" @click="login" type="primary">登录</ab-button>
      </p>
    </div>
  </div>
</template>

<script>
import http from '@/axios/http'
import { useRouter } from 'vue-router'
import { reactive, ref } from '@vue/reactivity'
import AbDinput from '@/components/able_mod/AbDinput.vue'
import AbButton from '@/components/able_mod/AbButton.vue'
import $tip from '@/components/able_mod/AbToolTip'
import util from '@/assets/js/util'
export default {
  components: { AbDinput, AbButton },
  setup() {
    let user = reactive({
      name: 'test',
      psw: '00000000'
    })
    let router = useRouter()
    async function login() {
      if (util.isNull(user.name)) {
        $tip.message.open('请输入用户名',1500,'warning')
        return
      }
      let p = {}
      p.user = user.name
      p.psw = user.psw
      let r = await http.login(p)
      if (r.code == 10000) {
        router.push('/footmark')        
      }
    }
    let showWX = ref(false)

    return{
      user,login,showWX
    }
  }
}
</script>

<style lang="scss" scoped>
.home{
  width: 100%;height:calc(100vh);
  // background: url('../assets/imgs/map.jpeg') no-repeat;
  background-size:100% 100%;
  .wx{
    position: fixed;
    top: 0;left: 0;
    margin: 30px 60px;
    background-color: rgba(220,220,220,0);
    z-index: 9;
    i{
      font-style: normal;
      font-size: 18px;
      font-weight: 900;
      vertical-align: middle;
      cursor: pointer;
      color: #555;
    }
    .iconfont{
      font-size: 28px;
      margin: 0 5px;
      color: $color-success;
    }
    .img{
      position: absolute;
      top: 40px;left: 5px;
      width: 160px;height: 160px;
      padding: 20px;
      background-color: #fff;
      box-shadow: 1px 1px 10px #aaa;
      border-radius: 10px;
    }
  }
  .mask{
    position: fixed;
    top: 0;left: 0;
    width: 100%;height:calc(100vh);
    // background-color: rgba(149,149,149,0.75);
    background-image: linear-gradient(to right, $color-primary, rgba(255,0,0,0));
    .logo{
      position: fixed;top: 18%;right: 12%;opacity: 0.1;
    }
  }
  .login{
    @extend %view-flex;
    position: fixed;
    top: 35%;right: 20%;
    padding: 20px 50px;
    background-color: rgba(254,254,254,0);
    // border: 1px solid #eee;
    // box-shadow: 1px 1px 1px #ccc;
    .title{
      margin: 20px 0;
      margin-top: -40px;
      color: $color-primary;
      white-space:nowrap;
      text-shadow: 1px 1px 1px #333;
      font-size: 32px;
    }
    p{
      padding: 5px;
      margin: 0;
    }
    .ab-input{
      background-color: #fff;
      width: 240px;
      height: 39px;
    }
    .ab-button{
      width: 240px;
      height: 39px;
      margin-top: 15px;
    }
  }
}

</style>